<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-30" style="height: 100rpx;">
			<image src="/static/image/9.png" style="width:86rpx;height:50rpx" class="" @click="pageback()"></image>
			<view class="flex aic">
			</view>
		</view>
		<view class="he3 w100pc"></view>
			<view class="gray272 weight f30 lrmg-30">矩陣</view>
			<view class="he4 w100pc"></view>
			<view class="middle lrmg-40">
				<!-- <view class="fsb">
					<view class="tag bg1" v-if="Number(coin.reward) > 0">參與中</view>
					<view class="tag bg2" v-else>已出局</view>
					<view class="f24">
					</view>
				</view> -->
				<view class="" v-if="juzhen != ''">
					<!-- 第一层 -->
					<view class="w100pc fcc">
						<view class="ppp1" v-if="juzhen[0].id != ''">{{jiequ(juzhen[0].username)}}</view>
						<view class="ppp1s" v-else></view>
					</view>
					<view class="w100pc" style="height: 100rpx;"></view>
					<!-- 第二层 -->
					<view class="flex">
						<view class="xian flex jc-end">
							<view class="www1" style="">
								<view class="ppp2" v-if="juzhen[1].id != ''">{{jiequ(juzhen[1].username)}}</view>
								<view class="ppp2s" v-else></view>
								<view class="one"></view>
							</view>
						</view>
						<view class="xian flex jc-center">
							<view class="www1" style="">
								<view class="ppp2" v-if="juzhen[2].id != ''">{{jiequ(juzhen[2].username)}}</view>
								<view class="ppp2s" v-else></view>
								<view class="two"></view>
							</view>
						</view>
						<view class="xian flex jc-start">
							<view class="www1" style="">
								<view class="ppp2" v-if="juzhen[3].id != ''">{{jiequ(juzhen[3].username)}}</view>
								<view class="ppp2s" v-else></view>
								<view class="three"></view>
							</view>
						</view>
					</view>
					<view class="w100pc" style="height: 100rpx;"></view>
					<!-- 第三层 -->
					<view class="flex">
						<view class="xian flex jc-end">
							<view class="mg-r-10 rel www2">
								<view class="ppp3" v-if="juzhen[4].id != ''">{{jiequ(juzhen[4].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="one_left"></view>
							</view>
							<view class="mg-r-10 rel www2">
								<view class="ppp3" v-if="juzhen[5].id != ''">{{jiequ(juzhen[5].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="one_center"></view>
							</view>
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[6].id != ''">{{jiequ(juzhen[6].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="one_right"></view>
							</view>
						</view>
						<view class="xian flex jc-center">
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[7].id != ''">{{jiequ(juzhen[7].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="two_left"></view>
							</view>
							<view class="lrmg-10 rel www2">
								<view class="ppp3" v-if="juzhen[8].id != ''">{{jiequ(juzhen[8].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="two_center"></view>
							</view>
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[9].id != ''">{{jiequ(juzhen[9].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="two_right"></view>
							</view>
						</view>
						<view class="xian flex jc-start">
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[10].id != ''">{{jiequ(juzhen[10].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="three_left"></view>
							</view>
							<view class="mg-l-10 rel www2">
								<view class="ppp3" v-if="juzhen[11].id != ''">{{jiequ(juzhen[11].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="three_center"></view>
							</view>
							<view class="mg-l-10 rel www2">
								<view class="ppp3" v-if="juzhen[12].id != ''">{{jiequ(juzhen[12].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="three_right"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		<view class="he3 w100pc"></view>
	</view>
</template>

<script>
	var	that
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default{
		data(){
			return{
				juzhen:[],
				coin:{},
				ids:''
			}
		},
		onLoad(e) {
			that = this
			that.ids = e.id
			that.gets()
		},
		methods:{
			//截取后三位
			jiequ(e){
				var disName = e;
				var dateLength = disName.length;
				var key = disName.substring(dateLength-3,dateLength);
				return key
			},
			// 获取首页数据
			gets(){
				that.$postAjax('api/Matrix/getMmatrix',{id:that.ids},function(res){
					console.log(res);
					that.juzhen = res.data
				})
			},
			dianji(index) {
				this.current = index;
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
			pageback(){
				pageback()
			}
		}
	}
</script>

<style lang="scss">
	.aaa{border-radius: 40rpx 0 0 40rpx;}
	.bbb{border-radius: 0 40rpx 40rpx 0;}
	.bll{background: #1C416D;width: 50%;height: 100rpx;text-align: center;line-height: 100rpx;color: #fff;}
	.gll{background: #D4D4D4;width: 50%;height: 100rpx;text-align: center;line-height: 100rpx;color: #8A8A8A;}
	.middle{
		.ppp1{
			width: 100rpx;
			height: 100rpx;
			background: #31B898;
			color: #fff;
			font-size: 26rpx;
			font-weight: bold;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
		}
		.ppp1s{
			width: 100rpx;
			height: 100rpx;
			background: #31B898;
			border-radius: 50%;
		}
		.ppp2{
			width: 70rpx;
			height: 70rpx;
			background: #31B898;
			color: #fff;
			font-size: 18rpx;
			font-weight: bold;
			line-height: 70rpx;
			text-align: center;
			border-radius: 50%;
		}
		.ppp2s{
			width: 70rpx;
			height: 70rpx;
			background: #31B898;
			border-radius: 50%;
		}
		.ppp3{
			width: 60rpx;
			height: 60rpx;
			background: #31B898;
			color: #fff;
			font-size: 14rpx;
			font-weight: bold;
			line-height: 60rpx;
			text-align: center;
			border-radius: 50%;
		}
		.ppp3s{
			width: 60rpx;
			height: 60rpx;
			background: #31B898;
			border-radius: 50%;
		}
		.tag{
			color: #fff;
			width: 172rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			border-radius: 20rpx;
			font-size: 26rpx;
		}
		.www1{
			width: 70rpx;height: 70rpx;
			position: relative;
		}
		.www2{
			width: 60rpx;height: 60rpx;
		}
		.bg1{
			background: #FFC84D;
		}
		.bg2{
			background: #EB6075;
		}
		.xian{
			width: 33.33%;
		}
		.one{
			position: absolute;
			width: 1rpx;
			height: 120rpx;
			right: -20rpx;
			top: -120rpx;
			background: #31B898;
			transform: rotate(40deg);
		}
		.two{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 34rpx;
			top: -90rpx;
			background: #31B898;
			// transform: rotate(40deg);
		}
		.three{
			position: absolute;
			width: 1rpx;
			height: 120rpx;
			left: -20rpx;
			top: -120rpx;
			background: #31B898;
			transform: rotate(140deg);
		}
		.one_left{
			position: absolute;
			width: 1rpx;
			height: 110rpx;
			right: -20rpx;
			top: -110rpx;
			background: #31B898;
			transform: rotate(40deg);
		}
		.one_center{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 0rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(20deg);
		}
		.one_right{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 24rpx;
			top: -90rpx;
			background: #31B898;
		}
		.two_left{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 0rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(20deg);
		}
		.two_center{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 24rpx;
			top: -90rpx;
			background: #31B898;
		}
		.two_right{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			left: 5rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(340deg);
		}
		.three_left{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 24rpx;
			top: -90rpx;
			background: #31B898;
		}
		.three_center{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			left: 0rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(340deg);
		}
		.three_right{
			position: absolute;
			width: 1rpx;
			height: 110rpx;
			left: -20rpx;
			top: -110rpx;
			background: #31B898;
			transform: rotate(140deg);
		}
	}
</style>